import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';

import Header from '../../components/Header'
import LeftOneTopTwo from '../../components/LeftOneTopTwo'
import OneMid from './OneMid'
import LeftTwoHeader from './LeftTwoHeader'
import LeftTwoTop from './LeftTwoTop'
import LeftTwoBottomMid from './LeftTwoBottomMid'
import LeftTwoBottomOne from './LeftTwoBottomOne'
import LeftTwoBottomTwo from './LeftTwoBottomTwo'
import Map from './Map'
import RightOneTopOne from './RightOneTopOne'
import RightOneTopTwo from './RightOneTopTwo'
import RightOneMid from './RightOneMid'
import RightTwoTop from './RightTwoTop'
import RightTwoMid from './RightTwoMid'
import RightTwoBot from './RightTwoBot'
import TopLog from './Top10'
import FirstStore from "../../store/firstStore";
import SecondStore from "../../store/secondStore";
import RateBox from "./errorRate";
import Logistics from './logistics'
interface IProps {
}

interface IState {
    isLoading: any
}

const neverResolve = new Promise(() => {
});

function Suspender({ suspend }) {
    if (suspend) {
        throw neverResolve;
    } else {
        return null;
    }
}

function Preload({ show, children }) {
    return (
        <React.Suspense fallback={null}>
            {children}
            <Suspender suspend={!show} />
        </React.Suspense>
    );
}

@observer
class Home extends React.Component<IProps, IState> {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }

    public async componentDidMount() {
        this.getTime()
        this.handleChangeTime()
        FirstStore.SerialLotNumber = null
        this.refreshPage();
        await FirstStore.initFirst()
    }

    // 定时器
    private interval: any
    private refreshInterval: any
    // 刷新页面
    public refreshPage = () => {
        this.refreshInterval = setInterval(() => {
            if (SecondStore.isShowSecondF) {
                FirstStore.initFirstSecond()

            } else {
                FirstStore.initFirst()
            }
        }, 900000)
    }
    // 获取时间
    public getTime = () => {
        const weeks = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        // 每隔一秒获取当前时间，并更新状态数据 currentTime
        this.interval = setInterval(() => {
            const currentTime = new Date(Date.now());
            FirstStore.year = currentTime.getFullYear(),
                FirstStore.month = month[(currentTime.getMonth())],
                FirstStore.day = currentTime.getDate(),
                FirstStore.hour = currentTime.getHours() + ':' + (currentTime.getMinutes().toString().length === 1 ? '0' + currentTime.getMinutes() : currentTime.getMinutes()),
                FirstStore.week = weeks[currentTime.getDay()]
        }, 1000)
    };

    // 转化麦迪逊时间
    public handleChangeTime = () => {
        const weeks = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        // 每隔一秒获取当前时间，并更新状态数据 currentTime
        this.interval = setInterval(() => {
            let currentTime = Date.parse((new Date()).toString())
            const MdTime = currentTime - (13 * 3600 * 1000)
            const now = new Date(MdTime)
            FirstStore.yearM = now.getFullYear(),
                FirstStore.monthM = month[(now.getMonth())],
                FirstStore.dayM = now.getDate(),
                FirstStore.hourM = now.getHours() + ':' + (now.getMinutes().toString().length === 1 ? '0' + now.getMinutes() : now.getMinutes()),
                FirstStore.weekM = weeks[now.getDay()]
        }, 1000)
    }

    // 控制页面切换
    public handleChange = () => {
        SecondStore.isShowSecondF = !SecondStore.isShowSecondF
        if (this.state.isLoading === null) {
            this.setState({
                isLoading: true
            })
        } else {
            this.setState({
                isLoading: null
            })
        }
        if (SecondStore.isShowSecondF) {
            FirstStore.initFirstSecond()
            return
        }
        FirstStore.initFirst()
    }

    componentWillUnmount() {
        console.log('卸载页面')
        FirstStore.slideTitle = ''
        clearInterval(this.interval)
        clearInterval(this.refreshInterval)
    }

    public render() {
        const { week, day, hour, month, year, weekM, dayM, hourM, monthM, yearM } = FirstStore
        const { isLoading } = this.state
        const { isShowSecondF } = SecondStore
        const {
            orderData, countOrderCM, countOrderPM, countOrderCV, countOrderCS, orderDataX, countOrderII,
            averageDataX, averageDataY, countAverage,
            responseTime, averageDay, averageDayY, averageDayX,
            responseTimeX, responseTimeFY, openWo,
            countOrderFiveX, countOrderFiveCMY, countOrderFiveCSY, countOrderFiveCVY, countOrderFiveIIY, countOrderFivePMY,
            noOpenWo, noOpenWoX, noOpenWoY, hotOrderList, prepareList,
            emergencyrList, northEastArea, northArea, westArea, southArea, eastArea, waringLight,
            slideTitle, predictWarning, error, beforeAge, beforeChartX, beforeChartY, patientTXX, patientTXY,
            patientMTXX, patientMTXY, patientMVCTX, patientMVCTY, responseTimeU, responseTimeUX, responseTimeUFY,
            logTop, EquipmentX, EquipmentY, ExceptionX, ExceptionY, top10Data, identify,
            LogisticsArr
        } = FirstStore
        return (
            <div className={styles.container}>
                <div className={styles.leftOne}>
                    <div className={styles.leftOneTopOne}>
                        <Header address='北京' week={week} day={day} hour={hour} year={year} month={month} />
                        <Header address='麦迪逊'
                            year={yearM}
                            week={weekM}
                            day={dayM}
                            hour={hourM}
                            month={monthM} />
                    </div>
                    <Preload show={isLoading === null}>
                        <div className={styles.leftTwoBottomMid}>
                            <LeftTwoBottomMid hotList={hotOrderList} />
                        </div>
                        <div className={styles.leftTwoTopTwo}>
                            <LeftTwoTop chartDataX={noOpenWoX} chartDataY={noOpenWoY} noOpenWo={noOpenWo} />
                        </div>
                        <div className={styles.leftTwoBottomTwo}>
                            <Logistics LogisticsArr={LogisticsArr} />
                        </div>
                        {/* <div className={styles.leftTwoBottomTwo}>
                            <LeftTwoBottomTwo emergencyrList={emergencyrList} />
                        </div> */}
                    </Preload>
                    <Preload show={isLoading !== null}>
                        <div className={styles.leftOneTopTwo}>
                            <LeftOneTopTwo countII={countOrderII} countPM={countOrderPM} countCV={countOrderCV}
                                countCS={countOrderCS} countCM={countOrderCM} isShadow={false}
                                dataX={countOrderFiveX} dataY1={countOrderFiveCMY}
                                dataY2={countOrderFiveCSY}
                                dataY3={countOrderFiveCVY} dataY4={countOrderFiveIIY}
                                dataY5={countOrderFivePMY} />
                        </div>
                        <div className={styles.leftOneMid}>
                            <OneMid identify={true} color='#09A0D1' title={'现场响应时间'} chartDataY={averageDataY}
                                unit={'单位/小时'}
                                count={countAverage}
                                chartDataX={averageDataX} />
                            <OneMid identify={identify} color='#FF2877' title='备件响应时间（十分紧急）' chartDataY={responseTimeFY}
                                count={responseTime}
                                unit={'单位/小时'}
                                chartDataX={responseTimeX} />
                        </div>
                    </Preload>

                </div>

                <div className={styles.middle}>
                    <Map northEastArea={northEastArea} westArea={westArea} waringLight={waringLight}
                        southArea={southArea} northArea={northArea} eastArea={eastArea} />
                </div>
                <div className={styles.rightOne}>
                    <div className={styles.rightOneTopOne}>
                        <RightOneTopOne slideTitle={slideTitle} />
                    </div>
                    <Preload show={isLoading === null}>
                        <div className={styles.rightOneTopTwoN}>
                            <RightOneTopTwo predictWarning={predictWarning} />
                        </div>
                        <div className={styles.rightOneTopMidN}>
                            <RateBox titleLeft='异常中断统计' titleRight='报错率统计' patientTXX={patientTXX}
                                patientTXY={patientTXY}
                                EquipmentX={ExceptionX}
                                EquipmentY={ExceptionY}
                            />
                            <div className={styles.topBox}>
                                <TopLog predictWarning={top10Data} />
                            </div>
                        </div>
                    </Preload>
                    <Preload show={isLoading !== null}>
                        <div className={styles.rightOneTopTwo}>
                            <RightTwoTop beforeChartX={beforeChartX} beforeChartY={beforeChartY}
                                beforeAge={beforeAge} />
                        </div>
                        <div className={styles.rightOneTopThree}>
                            <RightOneMid error={error} />
                        </div>
                        <div className={styles.rightOneTopMid}>
                            <RightTwoMid titleLeft='设备负荷率' titleRight='治疗分次统计' patientTXX={patientTXX}
                                EquipmentX={EquipmentX} EquipmentY={EquipmentY}
                                patientTXY={patientTXY} />
                        </div>

                    </Preload>
                </div>
                <div className={styles.change} onClick={this.handleChange} />
            </div>
        );
    }
}

export default Home;
